import { t } from 'i18next'
import React, { useState } from 'react'
import { StyledDeleteMeetingDialog } from '../style'
import { fetchDeleteMeeting, fetchDeleteRegularMeeting } from '@/api/myMeeting'
import { RadioGroup, Radio, Modal, Input } from '@kedacom/react-next'
import Alert from '@/components/Alert'

export interface DeleteMeetingDialogProps {
	isShow: boolean
	setIsShow: (val: boolean) => void
	ids: string[]
	meetingMoid: string
}
export default function DeleteMeetingDialog(props: DeleteMeetingDialogProps) {
	const { isShow, ids, meetingMoid, setIsShow } = props
	const [reason, setReason] = useState(1)
	const [reasonDesc, setReasonDesc] = useState('')
	const handleDeleteDialogOK = () => {
		let desc = reason === 1 ? t('会议时间冲突') : reasonDesc
		if (!desc) return
		setIsShow(false)
		if (ids.length > 0) {
			fetchDeleteRegularMeeting(ids, meetingMoid, desc).then((res) => {
				if (res.success) {
					window.location.reload()
				} else {
					Alert(res.description ?? t('删除会议失败'))
				}
			})
		} else {
			fetchDeleteMeeting(meetingMoid, desc).then((res) => {
				if (res.success) {
					window.location.reload()
				} else {
					Alert(res.description ?? t('删除会议失败'))
				}
			})
		}
	}
	return (
		<Modal
			width={366}
			height={258}
			title={t('取消会议')}
			open={isShow}
			onOk={handleDeleteDialogOK}
			onCancel={() => setIsShow(false)}
			onClick={(e) => e.stopPropagation()}
			okText={t('确定')}
			cancelText={t('取消')}
		>
			<StyledDeleteMeetingDialog className="delete-meeting-dialog">
				<RadioGroup
					value={reason}
					onChange={(e, value) => {
						setReason(value)
					}}
				>
					<div className="content">
						<Radio value={1} width={155}>
							{t('会议时间冲突')}
						</Radio>
						<div className="other-reason">
							<Radio value={0}>{t('其他')}</Radio>
							{reason === 0 && (
								<Input
									className="reason-input"
									value={reasonDesc}
									width={180}
									maxLength={40}
									focusMsg={t('请输入取消会议原因')}
									rule={{
										required: {
											msg: t('取消会议原因不能为空'),
										},
									}}
									onChange={(e, v) => {
										setReasonDesc(v)
									}}
								/>
							)}
						</div>
					</div>
				</RadioGroup>
			</StyledDeleteMeetingDialog>
		</Modal>
	)
}
